<template>
  <div class="detail">
    <el-descriptions title="公司信息" :column="3" size="medium" border>
      <el-descriptions-item label-class-name="label" label="公司全称">{{ detail.fullName }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="公司简称">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="所属行业">{{ detail.industryId }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="公司性质">{{ detail.nature }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="公司规模">{{ detail.scale }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="公司福利">
        <el-tag type="warning" v-for="(item, index) in detail.welfare" :key="index" style="margin-right: 15px">
          {{ item.name }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="上班时间">{{ detail.workTime }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="休息时间">{{ detail.weekend }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="加班情况">{{ detail.workOvertime }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="公司地址">{{ detail.address }}</el-descriptions-item>
      <el-descriptions-item label-class-name="label" label="官网链接">
        <a target="_blank" :href="detail.link">{{ detail.link }}</a>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="3" size="medium" border>
      <el-descriptions-item label-class-name="label" label="公司简介" :span="2">
        <span class="introduce">{{ detail.introduce }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div class="photos">
      <div class="label">公司图片</div>
      <div class="photo">
        <img :src="item.url" v-for="(item, index) in detail.photos" :key="index" />
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyDetail } from '@/api/company'
export default {
  data() {
    return {
      detail: {}
    }
  },
  mounted() {
    const id = this.$route.query.id
    this.initData(id)
  },
  methods: {
    async initData(id) {
      const res = await getCompanyDetail(id)
      this.detail = res.data
    }
  }
}
</script>

<style lang="scss">
.detail .label {
  width: 100px;
}

.detail .introduce {
  display: block;
  width: 50%;
}

.detail .photos {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  color: #909399;
  .label {
    padding-left: 10px;
  }
  img {
    width: 250px;
    height: 150px;
    margin-right: 20px;
  }
}
</style>
